<script setup lang="ts">
	const { t, locale } = useI18n()
	const { isDark, toggleDark } = useDarks()

	const toggleLocale = () => {
		locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
	}

	const language = computed(() =>
		locale.value === 'zh-CN' ? '中文' : 'English'
	)

	const theme = computed(() =>
		isDark.value ? 'dark' : 'light'
	)
</script>

<template>
	<div class="m-6">Hello，This is the tov template！！</div>
	<div class="cursor-pointer m-6" @click="toggleDark()"
		>theme: {{ theme }}</div
	>

	<div
		class="cursor-pointer mt-6 ml-6"
		@click="toggleLocale()"
	>
		<div>language: {{ language }}</div>
		<div>base: {{ t('about') }}</div>
		<div
			>nesting: {{ t('nesting.sir') }}
			{{ t('nesting.lady') }}</div
		>
	</div>
</template>
